<template>
	<view>
		<view class="header">
			
			<image v-if="data.litpic" class="img" mode="widthFix" :src="data.litpic"></image>
		</view>
		<view class="container">
			<rich-text :nodes="data.body"></rich-text>
		</view>
		<view class="form">
			<view class="title">给我们留言</view>
			<form @submit="formSubmit" @reset="resetForm">
				<view class="fm">
				<view class="uni-form-item uni-column">
					<view class=""><span class="red">*</span>昵称：</view>
					<view><input class="uni-input" v-model="user" name="user" placeholder="请输入您的昵称" /></view>
				</view>
				<view class="uni-form-item uni-column">
					<view class=""><span class="red">*</span>手机：</view>
					<view><input class="uni-input" v-model="tel" name="tel" placeholder="请输入您的手机号" /></view>
				</view>
				<view class="uni-form-item uni-column">
					<view class="">邮箱：</view>
					<view><input class="uni-input" v-model="email" name="email" placeholder="请输入您的邮箱" /></view>
				</view>
				<view class="uni-form-item " style="margin-top: 20px;">
					<view class=""><span class="red">*</span>留言：</view>
					<view><textarea name="body" v-model="body" placeholder-style="background:#f3eaea" placeholder="请输入留言内容"/></view>
				</view>
				<view class="uni-column-button">
					<button type="primary" form-type="submit">提交</button>
					<button type="default" form-type="reset">重置</button>
				</view>
				</view>
			</form>
			
			
		</view>
		
		
	</view>
</template>

<script>
	var config = require('../common/util.js');
	
	export default {
		data() {
			return {
				data:[],
				user:'',
				tel:'',
				body:'',
				email:'',
			}
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:'联系我们'
			})
			this.getdata()
		},
		onShow(){
			// #ifdef MP-BAIDU
			swan.setPageInfo({
				title: this.data.classname,
				keywords: '极致CMS,企业建站,免费CMS,开源CMS,免费商用CMS,资讯小程序',
				description: '这是一个免费商用的极致新闻资讯小程序，赶紧来分享使用吧！',
				articleTitle: '功能强大，免费开源CMS，免费商用的小程序源码！',
				releaseDate: config.nowday(),
				image: [
					this.data.litpic ? this.data.litpic : '/static/banner.png'
				],
				/*
				video: [{
					url: 'https://www.baidu.com/mx/v12.mp4',
					duration: '100',
					image: 'https://ms-static.cdn.bcebos.com/miniappdocs/img/image-scaleToFill.png'
				}],
				visit: {
					pv: '1000',
					uv: '100',
					sessionDuration: '130'
				},
				
				likes: '75',//点赞
				comments: '13',//评论
				collects: '23',//收藏
				shares: '8',//分享
				followers: '35',//关注
				*/
				success: res => {
					console.log('setPageInfo success', res);
				},
				fail: err => {
					console.log('setPageInfo fail', err);
				}
			})
			// #endif
		},
		
		// 自定义此页面的转发给好友(已经有全局的分享方法，此处会覆盖全局)
		onShareAppMessage(res) {
		    return {
		      title: this.data.classname,
		      path: '/pages/contact',
			  imageUrl: this.data.litpic ? this.data.litpic : '/static/banner.png'
		    }
		  },
		  // 自定义页面的分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.data.classname,
				path: '/pages/contact',
				imageUrl: this.data.litpic ? this.data.litpic : '/static/banner.png'
			}
		},
		methods:{
			
			getdata(){
				var that = this;
				uni.request({
					  url: config.webapi+'/getData/getclass',
					  data: {
							  key:config.apikey,
							  model:'classtype',
							  id:4
						  },
					  success: (res) => {
						 // console.log(res.data);
						  if(res.data.code!=0){
							  uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon :'error'
							  });
						  }
						  let len = res.data.data.length;
						  for(var i=0;i<len;i++){
							  if(res.data.data[i].litpic){
								  res.data.data[i].litpic = res.data.data[i].litpic.indexOf('http')>-1 ? res.data.data[i].litpic : config.filepath+res.data.data[i].litpic;
								  	 
							  }
							  
							
						  }
						  var reg = /src=\"([^"]+)\"/;
						  var www = config.filepath;
						  res.data.data[0].body = res.data.data[0].body.replace(reg,function(a){
						  	if(a.indexOf('//')==-1){
						  		return a.replace( /src=\"([^"]+)\"/,"src=\""+www+"$1\"" );
						  	}
						  	
						  });
						 that.data = res.data.data[0];
						 
						
						 
					  },
				})
			},
			
			formSubmit(e){
				//保存数据
				let param = e.detail.value;
				let url = config.webapi+'/getData/message';
				if (!param.user) {
					uni.showToast({
						title:'请输入您的昵称',
						icon:'none'
					});
					return false;
				}
				if (!param.tel) {
					uni.showToast({
						title:'请输入您的手机号',
						icon:'none'
					});
					return false;
				}
				if (!param.body) {
					uni.showToast({
						title:'请输入留言内容',
						icon:'none'
					});
					return false;
				}
				console.log(param)
				param.key = config.apikey;
				param.title='小程序留言';
				var that = this;
				uni.request({
					  url: url,
					  data: param,
					  header: {
						'content-type':'application/x-www-form-urlencoded' 
					  },
					  method:'POST',
					  success: (res) => {
						  let data = res;
						  if (data.code == 0) {
						  	uni.showToast({
								title:data.data.msg,
								icon:'success'
							});
						  	that.resetForm()
						  } else {
						  	
						  	uni.showToast({
						  		title: data.data.msg,
						  		duration: 2000,
								icon:'error'
						  	});
						  	
						  }
					  }
					})
				
				
			},
			resetForm() {
				console.log('form发生了reset事件');
				this.user = '';
				this.email = '';
				this.tel = '';
				this.body = '';
			},
			
		}
		
		
	}
	
</script>

<style>
	.title{
		    text-align: center;
		    margin: 20px;
		    font-size: 20px;
	}
	.img{
		width: 100%;
	}
	.container{
		    padding: 15px;
		    line-height: 25px;
	}
	.form{
		margin: 20px;
	}
	.uni-column{
		    display: flex;
		    flex-direction: row;
		    margin-top: 20px;
		    border-radius: 5px;
		    border: 1px solid #efe6e6;
		    padding: 6px;
	}
	.uni-column-button{
		display: flex;
		flex-direction: row;
		margin: 20px;
	}
		
	.red{
		color:red;
		margin-right: 2px;
	}
	.fm{
		    border: 1px solid #ccc;
		    border-radius: 5px;
		    padding: 0 10px;
	}
</style>